<template>
	<view class="container">
		<customNavigation title="待处理异常事项汇总" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png" color="white" background="#32A238"></customNavigation>
		<view class="main">
			<view class="tabList">
				<view :class="['tabItem',{'select':selectIndex===item.id}]" v-for="(item,index) in tabList" @click="changeTab(item.id)">
					{{item.name}}
					<view class="line" v-if="selectIndex===item.id"></view>
				</view>
			</view>
			<view class="list">
				<view class="item" @click="toWorkDetail(item.id,item.type)" v-for="item in showList" :key="item">
					<image class="carImg" :src="item.image?item.image:'../../static/images/gzlb_jpg.png'" mode=""></image>
					<view class="itemRight">
						<view class="itemType">
							{{item.description}}
						</view>
						<view class="itemBottom">
							<view class="bottomItem">
								检查发现
							</view>
							<view class="bottomItem">
								{{item.subUser}}
							</view>
							<view class="bottomItem2">
								{{item.subTimeStr}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from "../../utils/controller.js"
	export default {
		components:{
			customNavigation
		},
		data() {
			return {
				tabList:[
					{
						name:"全部",
						id:0
					},
					{
						name:"检查发现",
						id:1
					},
					{
						name:"随手报",
						id:2
					},
					{
						name:"动态监控",
						id:3
					},
					{
						name:"车载设备",
						id:4
					}
				],
				selectIndex:0,
				showList:[],
				list1:[],
				list2:[],
				list3:[],
				list4:[],
				list5:[]
			};
		},
		onShow(){
			this.getExceptionList()
		},
		mounted() {
		},
		methods:{
			//tab切换
			changeTab(index){
				this.selectIndex=index
				if(index==0){
					this.showList=this.list1
				}else if(index==1){
					this.showList=this.list2
				}else if(index==2){
					this.showList=this.list3
				}else if(index==3){
					this.showList=this.list4
				}else if(index==4){
					this.showList=this.list5
				}
			},
			
			//跳转处理汇报事项
			toWorkDetail(id,type){
				uni.navigateTo({
					url:"/pages/workDetail/workDetail?id="+id+"&type="+type
				})
			},
			
			//获取异常事项汇总
			getExceptionList(){
				api.GetExceptionList().then(res=>{
					this.list1=res.data
					this.showList=res.data
					this.list2=[]
					this.list3=[]
					this.list4=[]
					this.list5=[]
					res.data.forEach(item=>{
						if(item.attrList&&item.attrList.length>0){
							for(let i=0;i<item.attrList.length;i++){
								if(item.attrList[i].FileExtend=='.png'||item.attrList[i].FileExtend=='.PNG'||item.attrList[i].FileExtend=='.jpg'||item.attrList[i].FileExtend=='.JPG'||item.attrList[i].FileExtend=='.jpeg'||item.attrList[i].FileExtend=='.JPEG'){
									item.image=item.attrList[i].Path
									console.log(item)
								}
							}
						}
						if(item.type==1){
							this.list2.push(item)
						}else if(item.type==2){
							this.list3.push(item)
						}else if(item.type==3){
							this.list4.push(item)
						}else if(item.type==4){
							this.list5.push(item)
						}
					})
				})
			}
		}
	}
</script>

<style lang="less">
page{
	width: 100%;
	height: auto;
	background-color: rgba(250, 250, 250, 1);
	.main{
		width: 100%;
		height: auto;
		margin-top: 11vh;
		.tabList{
			width: 100%;
			height: 88rpx;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.tabItem{
				height: 100%;
				position: relative;
				font-size: 30rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #666666;
				line-height: 88rpx;
				.line{
					width: 34rpx;
					height: 4rpx;
					background: #32A238;
					border-radius: 2rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%,0);
				}
			}
			.select{
				font-size: 36rpx;
				color: #2A2A2A;
			}
		}
		.list{
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30rpx;
			box-sizing: border-box;
			.item{
				width: 686rpx;
				height: 152rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				margin-bottom: 24rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				.carImg{
					width: 152rpx;
					height: 152rpx;
				}
				.itemRight{
					width: 534rpx;
					height: 100%;
					.itemType{
						width: 100%;
						height: 50%;
						border-bottom: 2rpx solid rgba(245, 245, 245, 1);
						text-align: center;
						line-height: 76rpx;
						font-size: 30rpx;
						font-family: PingFangSC;
						font-weight: 500;
						color: #2A2A2A;
					}
					.itemBottom{
						width: 100%;
						height: 50%;
						display: flex;
						align-items: center;
						.bottomItem{
							width: 30%;
							height: 100%;
							border-right: 2rpx solid rgba(245, 245, 245, 1);
							line-height: 76rpx;
							text-align: center;
							font-size: 26rpx;
							font-family: PingFangSC;
							font-weight: 400;
							color: #666666;
						}
						.bottomItem2{
							width: 40%;
							height: 100%;
							line-height: 76rpx;
							text-align: center;
							font-size: 26rpx;
							font-family: PingFangSC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
		}
	}
}
</style>
